<!DOCTYPE html>
<html>
<head>
    <title>表单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">
</head>
<body style="overflow: hidden;">
<div style="height: 30px;width: 100%;font-weight: bold;line-height: 30px;font-size: 20px;">待转换内容：
</div>
<div class="div_main">
        <textarea id="txtContent" class="ui_validate" type="text"
                  ui-config="required:true"></textarea>
</div>
<div style="height: 30px;width: 100%;font-weight: bold;line-height: 30px;font-size: 20px;">转换后内容：
</div>
<div class="div_main">
        <textarea id="txtAfter" class="ui_validate" type="text"
                  ui-config="required:false"></textarea>
</div>
<div style="width: 100%;height: 40px;" id="btnbar">
    <input id="cb" type="checkbox"><label for="cb">JS文件中使用</label>
    <button id="btngu" class="button" ui-config="style:'button_submit'">GB转Unicode</button>
    <button id="btnug" class="button" ui-config="style:'button_submit'">Unicode转GB</button>
    <button id="btnReset" type="reset" class="button" ui-config="style:'button_cancel'">重置</button>
</div>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../lib/template.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function () {
        var btngu = $('#btngu');
        var btnug = $('#btnug');
        var btnReset = $('#btnReset');
        var txtContent = $('#txtContent');
        var txtAfter = $('#txtAfter');

        var width = $(document.body).width();
        var height = $(document.body).height();
        $('.div_main').height((height - 100) / 2).width(width);

        txtContent.autoFit(true);
        txtContent.width(txtContent.width() - 40).height(txtContent.height() - 10).uiValidate();

        txtAfter.attr('readonly',true).autoFit(true);
        txtAfter.width(txtAfter.width() - 40).height(txtAfter.height() - 10).uiValidate();

        $('#btnbar').uiButtonBar({
            height: 30,
            backgroundColor: '#eeeeee'
        });

        $('#btngu').bind('click', function () {
            var content = txtContent.val();
            var cols = content.split('\n');
            var res = [];
            for (var i = 0; i < cols.length; i++) {
                if ($.trim(cols[i]) != '') {
                    try {
                        var sets = cols[i].split('=');
                        var convert = sets[1].toString();
                        if (sets.length > 2) {
                            convert = cols.substring(cols.indexOf('='));
                        }
                        convert = UnicodeConverter.toGB(sets[1].toString());
                        convert = UnicodeConverter.toUnicode(convert);
                        var after = sets[0] + '=' + convert;
                        res.push(after);
                    } catch (e) {
                        var convert = UnicodeConverter.toGB(cols[i]);
                        convert = UnicodeConverter.toUnicode(convert);
                        res.push(convert);
                    }
                } else {
                    res.push('');
                }
            }

            txtAfter.val(res.join('\n'));
            return false;
        });
        $('#btnug').bind('click', function () {
            var content = txtContent.val();
            var convert = UnicodeConverter.toGB(content);
            txtAfter.val(convert);
            return false;
        });
        $('#btnReset').bind('click', function () {
            txtContent.val('');
            txtAfter.val('');
            return false;
        });
        var UnicodeConverter = {
            toUnicode: function (str) {
                var retStr = escape(str).toLocaleLowerCase();
                if ($('#cb').is(':checked')) {
                    retStr = retStr.replace(/%u/gi, '\\\\u');
                } else {
                    retStr = retStr.replace(/%u/gi, '\\u');
                }
                return retStr
                        .replace(/%0a/gi, '\r')
                        .replace(/%3d/gi, '=')
                        .replace(/%20/gi, ' ')
                        .replace(/%5b/gi, '[')
                        .replace(/%5d/gi, ']')
                        .replace(/%2c/gi, ',')
                        .replace(/%7c/gi, '|')
                        .replace(/%3c/gi, '<')
                        .replace(/%3f/gi, '?')
                        .replace(/%3a/gi, ':')
                        .replace(/%3b/gi, ';')
                        .replace(/%22/gi, '\"')
                        .replace(/%5c/gi, '\\')
                        .replace(/%25/gi, '%')
                        .replace(/%3e/gi, '>')
                        .replace(/%23/gi, '#')
                        .replace(/%27/gi, '\'')
                        .replace(/%28/gi, '(')
                        .replace(/%29/gi, ')')
                        .replace(/%7b/gi, '{')
                        .replace(/%7d/gi, '}');
            }
            , toGB: function (str) {
                return unescape(str.replace(/\\u/gi, '%u'));
            }
        };
    })
</script>
</html>